<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用选项卡</title>
  <script src="./js/jexcel.js"></script>
  <script src="./js/jsuites.js"></script>
  <link rel="stylesheet" href="./css/jsuites.css" type="text/css" />
  <link rel="stylesheet" href="./css/jexcel.css" type="text/css" />
</head>

<body>
  <h1>使用选项卡</h1>
  <p>将不同的电子表格分组在选项卡中</p>

  <div id="spreadsheet"></div>

  <div>
    <input type="button" value="新建工作表" onclick="add()" style="width:150px;">
    <input type="button" value="下载选中的工作表" onclick="download()" style="width:150px;">
  </div>
</body>
<script>
  /**
   * Add new worksheet
   */
  var add = function () {
    var sheets = [];

    sheets.push({
      sheetName: prompt('Create a new tab', 'New tab ' + document.getElementById('spreadsheet').jexcel.length),
      minDimensions: [10, 10]
    });

    jspreadsheet.tabs(document.getElementById('spreadsheet'), sheets);
  }

  /**
   * Download current worksheet
   */
  var download = function () {
    // Get selected tab
    var worksheet = document.getElementById('spreadsheet').children[0].querySelector('.selected').getAttribute('data-spreadsheet');
    // Download
    document.getElementById('spreadsheet').jexcel[worksheet].download();
  }

  /**
   * Create worksheet container with two jexcel instances
   */
  var sheets = [
    {
      sheetName: 'Sheet1',
      minDimensions: [10, 10]
    },
    {
      sheetName: 'Sheet2',
      minDimensions: [10, 10]
    }
  ];

  jspreadsheet.tabs(document.getElementById('spreadsheet'), sheets);
</script>

</html>